<script setup>
import { ref } from "vue";

const menuList = ref([
    {name:'Products'},{name:'Solutions'},{name:'Technology'},{name:'Support'},{name:'Contact Us'},
]);
const menuFlag = ref(4)

const menuClick = (i) =>{
    menuFlag.value = i
}
</script>

<template>
  <div class="box">
    <div class="top">
      <img class="logo" src="../assets/images/logo.png" alt="" />
      <div class="menu">
        <span :class="{'activeFlag':menuFlag == index}" @click="menuClick(index)" v-for="(item,index) in menuList" :key="index">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
}
.top {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-family: Roboto;
  padding: 24px 0;
}
.logo{
    width:20%;
    height:30px;
}
.menu{
    display: flex;
    align-items: center;
    height:35px;
}
.menu span{
    display: inline-block;
    height:35px;
    line-height: 35px;
    font-size: 16px;
    color: #4B5563;
    margin: 0 10px;
    cursor: pointer;
    padding: 0 20px;
}
.menu span:hover{
    background: #52AC73;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 0 20px;
}
.activeFlag{
    background: #52AC73;
    color: #FFFFFF !important;
    border-radius: 8px;
    padding: 0 20px;
}
</style>
